<template>
  <div>
    <div id="main" ref="chart"></div>
    <p class="text">CPU使用</p>
  </div>
</template>
<script>
import axios from "axios";

var echarts = require("echarts");
export default {
  name: "cpudata",
  data() {
    return {
      data: {
        series: [{
          type: 'gauge',
          progress: {
            show: true,
            width: 10
          },
          axisLine: {
            lineStyle: {
              width: 10
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            length: 4,
            lineStyle: {
              width: 2,
              color: '#b1b9cd'
            }
          },
          axisLabel: {
            distance: 18,
            color: '#c8deec',
            fontSize: 10
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 10,
            itemStyle: {
              borderWidth: 10
            }
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: 15,
            offsetCenter: [0, '70%']
          },
          data: [{
            value: 70
          }]
        }]
      }
    }
  },
  watch: {
    docker() {
      var chart = echarts.init(this.$refs.chart);
      this.refresh(chart);
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          this.refresh(chart)
        },0)
      },5000)
    }
  },
  methods: {
    refresh: function (chart) {
      chart.setOption(this.data);
      var that = this;
      axios.get("http://127.0.0.1:5000/getdockermsg?docker=" + this.docker + "&host=" + this.host).then(
          function (res) {
            var data = res.data["stats"];
            console.log(res.data["stats"]);
            var cpudelta = data["cpu_stats"]["cpu_usage"]["total_usage"] - data["precpu_stats"]["cpu_usage"]["total_usage"]
            var systemdelta = data["cpu_stats"]["system_cpu_usage"] - data["precpu_stats"]["system_cpu_usage"]
            var ans = 0;
            if (cpudelta > 0 && systemdelta > 0) {
              console.log(data["cpu_stats"]["cpu_usage"]["percpu_usage"].length)
              ans = ((cpudelta / systemdelta) * (data["cpu_stats"]["cpu_usage"]["percpu_usage"].length)*100).toFixed(2);
            }
            that.data.series[0].data[0].value = ans;
            // that.data.series[0].data[0].value = (dockerdata.stats.cpu_stats.cpu_usage.usage_in_usermode /
            //     dockerdata.stats.cpu_stats.cpu_usage.total_usage * 100).toFixed(2);
            echarts.init(that.$refs.chart).setOption(that.data);
          }
      )
    }
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  props: [
    "docker",
    "host"
  ]
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 15em;
  height: 180px;
}

.text {
  margin: 0px;
  text-align: center;
  font-weight: bold;
  color: #9daad2;
}
</style>